<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="${base}/static/media/css/bootstrap.css" />
<script src="${base}/static/index/vendor/jquery/jquery.min.js"></script>
<script src="${base}/static/index/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${base }/static/vendor/bootstrapPager/bootstrapPager.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${base }/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" charset="utf-8" src="${base }/static/js/layer/layer.js"></script>
</head>
<body onload="orderlist(1)" style="font-size:11px;">
	<section id="content">

		<div class="portlet-body">
			<form class="dataform" id="orderlist_form">
				<div class="row">					
					<label style="width:5%;height: 30px;text-align: right;display: inline-block;">名字：</label>
					<div style="width:14%;height: 30px;display: inline-block;">
						<input type="text" class="form-control" name="reciveName" value="">
					</div>
					<div class="btn-group btn-group-sm btn-group-solid" style="float: ;">
						<a href="javascript:;" onclick="orderlist()"
							class="btn offline_serch_hide"
							style="margin-right: 30px; background: #18BC9C; color: #fff; border-color: #18BC9C;"><i
							class="fa fa-search"></i>提交查询</a>
					</div>
					<div class="btn-group btn-group-sm btn-group-solid" style="float: right;">
						<a href="${base }/admin/receive"
							class="btn offline_serch_hide"
							style="margin-right: 30px; background: #18BC9C; color: #fff; border-color: #18BC9C;"><i
							class="fa fa-search"></i>添加领取人</a>
					</div>				
				</div>
				<div style="width: 100%; height: 15px;"></div>
				<div class="table-scrollable">
					<table class="table table-striped table-bordered table-hover"
						data-search="true">
						<thead>
							<tr>
								<th class="text-center">领取人</th>
								<th class="text-center">领取卡号的开始卡号</th>
								<th class="text-center">领取卡号的结束卡号</th>
								<th class="text-center">领取的卡的面额</th>
								<th class="text-center">数量</th>
								<th class="text-center">已使用数量</th>
								<th class="text-center">领取时间</th>
								<th class="text-center">操作</th>
							</tr>
						</thead>
						<tbody id="ordercontent"></tbody>
					</table>
					<div>
					<!-- 分页开始 -->
					<ul id="page" class="pagination"></ul>
					<input type="hidden" id="pageNum" name="pageNum" value="1">
					<input type="hidden" id="pageSize" name="pageSize" value="10">
					<!-- 分页结束 -->
					</div>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			function orderlist(pageNum) {
				$("#pageNum").val(pageNum)
				var data = $("#orderlist_form").serializeArray();
				$("#ordercontent").html("")
				$.ajax({
					url : "${base}/admin/receiveAll",
					type : 'post',
					dataType : 'json',
					data : data,
					success : function(res) {
						//debugger;
				
						$.each(res.data.list, function(i, obj) {
							var a = obj;
							//debugger;
							var tr = $('<tr>');
							tr.append('<td class="text-center">'
									+ obj.receiveName+ '</td>');
							tr.append('<td class="text-center">'
									+ obj.sequenceBegin + '</td>');
							tr.append('<td class="text-center">'
									+ obj.sequenceEnd + '</td>');
							tr.append('<td class="text-center">'
									+ obj.facePrice + '</td>');
							tr.append('<td class="text-center">'
									+ obj.receiveCount + '</td>');
							tr.append('<td class="text-center">'
									+ obj.useCards + '</td>');
							tr.append('<td class="text-center">'
									+ obj.sequenceTime + '</td>');
							
							tr.append('<td class="text-center"><input type="button" class="btn btn-success btn-xs" value="查看详情" onclick="showDetail('+obj.id+')"/></td>');
							/* if(obj.authCode == '1'){
								
								tr.append('<td class="text-center"><input type="button" style="background-color:#999;border-color:#999;" disabled="disabled" class="btn btn-success btn-xs" value="已激活"/></td>');
							}else if(obj.authCode =='0'){
								tr.append('<td class="text-center"><input type="button" class="btn btn-success btn-xs" value="查看详情" onclick="activate(\''+obj.sequenceBegin+'\',\''+obj.sequenceEnd+'\')"/></td>'); 
							}else{
								tr.append('<td class="text-center"><input type="button" style="background-color:#999;border-color:#999;" disabled="disabled" class="btn btn-success btn-xs" value="出错"/></td>');
							} */
							//订单内容 tbody
							$("#ordercontent").append(tr);
						});

						var total = res.data.total; // 总条数
						var pages = res.data.pages; // 总页数
						var pageNum = res.data.pageNum; // 当前页
						var pageSize = res.data.pageSize; // 每页显示条数

						$("#page").html('').append(Pager({
							totalCount : total, //总条数为150
							pageSize : pageSize, //每页显示6条内容，默认10
							buttonSize : 5, //显示6个按钮，默认10
							pageNum : pageNum, //页码的参数名为'p'，默认为'page'
							prevButton : '上一页', //上一页按钮
							nextButton : '下一页', //下一页按钮
							firstButton : '首页', //第一页按钮
							lastButton : '末页', //最后一页按钮

						}));
					}
				});
				return false;
			}
			/*  激活 */ 
			 function activate(sequenceBegin,sequenceEnd){
				 layer.confirm('确定要激活这些卡号吗?', {icon: 3, title:'提示'}, function(index){
						layer.close(index);
					  $.ajax({
							url :"${base}/admin/cardReceive/activateCard",
							type : 'post',
							dataType : 'json',
							data :{"sequenceBegin":sequenceBegin,"sequenceEnd":sequenceEnd},
							success : function(res) {
								layer.open({
									  title: '提示'
									  ,content: '成功激活'+res+'张卡片,请刷新页面查看'
									}); 
							}
						}); 
				 });
			}  
			
			 function showDetail(id){
				 //通过id获取 该卡段信息
				 
					layer.open({
		       			  type: 1,
		       			  title: '卡段详情',
		       			  shade: 0,
						  shadeClose: true,
		       			  skin: 'layui-layer-rim', //加上边框
		       			  area: ['1000px', '300px'], //宽高
		       			  content: $('#detail')
		       			});
					 $.ajax({
						url:"${pageContext.request.contextPath}/admin/cardReceive/detailById",
				        type:'post',
				        dataType:'json',
				        data:{'id':id},
				        success:function(res){

			        		//debugger;
			        		$("#detail_id").html(res.data.id);
			            	$("#sequenceBegin").text(res.data.sequenceBegin);
			            	$("#sequenceEnd").text(res.data.sequenceEnd);
			            	$("#facePrice").html(res.data.facePrice);
			            	$("#receiveCount").html(res.data.receiveCount);
			            	$("#receiveName").html(res.data.receiveName);
			            	$("#useCards").html(res.data.useCards);
			            	$("#notUses").html(res.data.notUses1+res.data.notUses2);
			            	$("#notActivation").html(res.data.notActivation);
			            	$("#sequenceTime").html(res.data.sequenceTime);
			            	
			            	if(res.data.notActivation != 0){
			            		//activate()
			            		var str = "&nbsp;&nbsp;<a href='javascript:activate("+res.data.sequenceBegin+","+res.data.sequenceEnd+");'>去激活</>";
			            		$("#notActivation").html(res.data.notActivation+str);
			            	}
			        		layer.open({
			       			  type: 1,
			       			  title: '订单详情',
			       			  shade: 0,
							  shadeClose: true,
			       			  skin: 'layui-layer-rim', //加上边框
			       			  area: ['1000px', '300px'], //宽高
			       			  content: $('#order')
			       			});
				        }
					}); 
				}
		</script>
		<!-- 列表页结束 -->
	</section>
	
	
	<!-- 列表页结束 -->
<div id="detail" style="display:none">
	<table class="table table-striped table-bordered table-hover" data-search="true">
        <tr> 
            <td class="text-center"><b>编号</b></td>
            <td class="text-center"><b>起始卡号</b></td>
            <td class="text-center"><b>结束卡号</b></td>
            <td class="text-center"><b>面额</b></td>
            <td class="text-center"><b>总数量</b></td>
        </tr>
        <tr>
        	<td class="text-center" id="detail_id"></td>
        	<td class="text-center" id="sequenceBegin"></td>
        	<td class="text-center" id="sequenceEnd"></td>
        	<td class="text-center" id="facePrice"></td>
        	<td class="text-center" id="receiveCount"></td>
        </tr>
        <tr>
        	<td class="text-center"><b>领用人</b></td>
            <td class="text-center"><b>已使用</b></td>
            <td class="text-center"><b>未使用</b></td>
            <td class="text-center"><b>未激活</b></td>
            <td class="text-center"><b>领卡时间</b></td>
        </tr>
        <tr>
        	<td class="text-center" id="receiveName"></td>
        	<td class="text-center" id="useCards"></td>
        	<td class="text-center" id="notUses"></td>
        	<td class="text-center" id="notActivation"></td>
        	<td class="text-center" id="sequenceTime"></td>
        </tr>
	</table>
</div>
</body>
